<template>
  <div class="login">
    <header>
      <h2>宏烨经纪人</h2>
      <p>
        <i class="iconfont icon-gengduo"></i>
        <i class="iconfont icon-crm17"></i>
      </p>
    </header>
    <main>
        <h1>
            <img src="" alt="">
        </h1>
        <div class="con">
            <li>
                <input type="text" placeholder="请输入手机号">
                <p style="">手机号输入有误</p>
            </li>
            <li>
               <input type="text" placeholder="请输入验证码">
               <span>yyds</span>
            </li>
            <li>
                <button>登录</button>
            </li>
        </div>
    </main>
  </div>
</template>

<script>
export default {}
</script>

<style lang='scss' scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 55px;
    background-color: skyblue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: #fff;
    h2 {
      font-weight: normal;
    }
    p {
      width: 80px;
      padding: 5px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #fff;
      border-radius: 30px;
    }
  }
}
main{
    flex: 1;
    overflow-y: scroll;
    h1{
        height: 120px;
        border-bottom: 1px solid #eee;
    }
    .con{
        width: 90%;
        height: 245px;
        border-bottom: 1px solid #eee;
        margin: 0 auto;
        li{
            width: 100%;
            height: 45px;
            margin: 30px 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            span{
                width: 100px;
                height: 100%;
                line-height: 45px;
                text-align: center;
                border: 1px solid #ddd;
                border-radius: 4px;
            }
            input{
                flex: 1;
                height: 45px;
                padding-left: 5px;
                border-radius: 5px;
                outline: none;
                border: 1px solid #ddd;
            }
            button{
                width: 100%;
                height: 45px;
                background-color: #58a8f3;
                outline: none;
                border: none;
                text-align: center;
                color: #fff;
                border-radius: 8px;
            }
            p{
                width: 100%;
                display: block;
            }
        }
    }
}
</style>
